<template>
  <div>
    <p>标题</p>
    <input type="text" v-model="title">
    <p>内容</p>
     <input type="text" v-model="content">

     <div class="btn" @click="add()">
        添加
     </div>
     <div v-if="isshow">正在加载..... </div>
  </div>
</template>

<script>
// 拦截器在请求或响应被处理前  拦截他们
//请求拦截器    ，响应拦截器
import axios from 'axios'
export default {
  name: 'axios-3-3',
  data(){
      return{
        title:'',
        isshow:false,
        content:''
      }
    },
  created(){
    //1.请求拦截器
    axios.interceptors.request.use(
      config=>{//在发送请求前做什么
        return config
      },
      err=>{//在请求错误做什么
      return Promise.reject(err)
      }
    )

    //2.响应拦截器
    axios.interceptors.response.use(
      res=>{//请求成功数据处理
        return res
      },
      err=>{//在请求错误做什么
      return Promise.reject(err)
      }
    )

    //3.案例 登录状态 (token)  ，添加拦截器
    let instance = axios.create({})
    instance.interceptors.request.use(
      config=>{
        config.headers.token=''
        return config
      }
    ) 
    //不需要(token)  ，不添加
    let newinstance = axios.create({})
    newinstance.get('/cache/get',{params:{key:12}})

   
    //4.移动端开发请求时间过长  ，提示正在请求、加载
    let instance_phone = axios.create({})
    instance_phone.interceptors.request.use(
      config=>{
        this.isshow=true//请求拦截器 ，加载弹窗
        return config
      }
    )
    instance_phone.interceptors.response.use(
      res=>{
         this.isshow=false//响应拦截器，隐藏弹窗
        return res
      }
    )
    //发起请求
    instance_phone.delete('/cache/delete',{params: {key:"userId_1101"}})
  }
}
</script>
